<template>
    <div>
        <div class="query-c">
            <Input :value="searchKey" @on-search="handleSearch" search placeholder="请输入书名" style="width: auto" />
        </div>
        <br>
        <!-- <Table border stripe :columns="columns1" :data="books">
            <template slot-scope="{ row }" slot="cover">
                <div>
                    <img :src="row.img" />
                </div>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <div>
                    <Button @click="handleDownload(row, index)">下载</Button>
                </div>
            </template>
        </Table> -->
        <Row>
          <Col span="2" v-for="b in books" :key="b.bid">
            <Card style="width: 95px; margin: 15px;">
              <img :src="b.img" style="width: 58px; height: 80px;" :title="b.Title" />
              <!-- <h5>{{b.Title}}</h5> -->
              <Button @click="handleSave(b)">保存</Button>
            </Card>
          </Col>
          <Spin size="large" fix v-if="loading"></Spin>
        </Row>
        <br>
    </div>
</template>

<script>
import { searchBook, addTask } from '../api/ebook'
export default {
  name: 'home',

  data () {
    return {
      columns1: [
        {
          title: 'Cover',
          key: 'cover',
          slot: 'cover'
        },
        {
          title: 'Name',
          key: 'Title'
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action'
          // render: this.renderDownloadButton
        }
      ],
      searchKey: '',
      books: [],
      loading: false
      // [
      //   {"__type":"js_ebook_data","bid":"7tnyVVKpfyj2AK%2bZWxn4xg%3d%3d","title":"JavaScript高级程序设计（第3版）[.mobi]","cover":"54/545b65a0caf3c7866be9a0df907f5aa4_s.jpg"},
      //   {"__type":"js_ebook_data","bid":"SNYen7niiXichO0DzexKsQ%3d%3d","title":"JavaScript网页动画设计[.mobi]","cover":"7d/7db7dc5e66014e675a601001c50b1f3a_s.jpg"}
      // ].map(b => {
      //   b.img = `http://files.epubee.com/getCover.ashx?fpath=${b.cover}`
      //   return b
      // }),
    }
  },

  methods: {
    async handleSearchBook (key) {
      this.loading = true
      const res = await searchBook(key)
      if (res.data && res.data.d instanceof Array) {
        // this.books = res.data['d'].map(b => {
        //   b.img = `http://files.epubee.com/getCover.ashx?fpath=${b.cover}`
        //   return b
        // })
        this.books = []
        res.data.d.forEach(b => {
          b.img = `http://files.epubee.com/getCover.ashx?fpath=${b.Cover}`
          this.books.push(b)
        })
      }
      this.loading = false
    },

    handleSearch (key) {
      if (this.searchKey !== key) {
        this.searchKey = key
        this.handleSearchBook(key)
      }
    },

    async handleSave (book) {
      const b = {
        bid: book.BID,
        cover: book.Cover,
        title: book.Title,
        __type: book.__type
      }
      await addTask(b).then(() => {
        this.$Notice.success({
          title: '保存成功!',
          desc: `${b.title} 保存成功!`,
          duration: 5
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
